<template>
  <div class="subject-container">
    <el-card class="box-card">
      <div class="search">
          <span>年级</span>
          <el-select 
            v-model="query.level" 
            style="width:300px;margin-left:5px;"
            clearable
            @clear="getKnowledgeList">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" class="searchBtn" @click="getKnowledgeList">查询</el-button>
      </div>
      <div class="table"  style="margin-top: 20px" >
          <el-table
            width="100%"
            :data="knowledgeList"
            stripe border>
            <el-table-column
              prop="id"
              label="id">
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="学科">
            </el-table-column>
            <el-table-column
                prop="levelName"
                label="年级">
              </el-table-column>
              <el-table-column
                prop="count"
                label="一级知识点数">
              </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                  <div class="btns">
                    <el-button class="btn" @click="edit(scope.row.id)">编辑</el-button>
                  </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              class="pagination"
              :current-page="query.pageIndex"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="query.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //查询参数
      query:{
        level: "",
        pageIndex: 1,
        pageSize: 5
      },
      knowledgeList:[], //知识点列表
      //总数
      total:0,
      //年级选择
      options: [{
          value: '1',
          label: '一年级'
        }, {
          value: '2',
          label: '二年级'
        }, {
          value: '3',
          label: '三年级'
        }, {
          value: '4',
          label: '四年级'
        }, {
          value: '5',
          label: '五年级'
        }, {
          value: '6',
          label: '六年级'
        }, {
          value: '7',
          label: '初一'
        }, {
          value: '8',
          label: '初二'
        }, {
          value: '9',
          label: '初三'
        }, {
          value: '10',
          label: '高一'
        }, {
          value: '11',
          label: '高二'
        }, {
          value: '12',
          label: '高三'
        }],
    }
  },
  created(){
    this.getKnowledgeList();
  },
  methods:{
    //查询知识点列表
    async getKnowledgeList(){
      const resp = await this.getRequest("/api/admin/knowledge/page",{
        pageIndex: this.query.pageIndex,
        pageSize: this.query.pageSize,
        level: this.query.level
      });

      this.knowledgeList = resp.data;
      this.total = resp.total
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
        //console.log(newSize);
        this.query.pageSize = newSize
        this.getSubjectList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
        //console.log(newPage);
        this.query.pageIndex = newPage
        this.getSubjectList();
    },
    //编辑功能
    edit(id){
      this.$store.commit("initknowledgeId",id);
      this.$router.replace("/admin/knowledge/create");
    }
  }
}
</script>

<style lang="scss" scoped>
.subject-container{
  .box-card{
    border-radius: 10px;
    .search{
        margin-top: 10px;
        display: flex;
        align-items: center;
        color:#1A1A1A;
        font-family: "黑体";
        .searchInput{
          margin-left: 10px;
          border:1px solid #1980FF;
          border-radius: 4px;
        }
        .searchBtn{
          margin: 0 0 0 20px;
        }
    }
    .table{
         color:#1A1A1A;
         font-family: "华文楷体";
         width: 100%;
         //内容居中
         /deep/.el-table th > .cell {
              text-align: center;
          }
          
          /deep/.el-table .cell {
              text-align: center;
          } 
          .btns{
            display: flex;
            justify-content: space-around;
          }
          .btn{
            border: none;
            font-size: 12px;
            margin:0 10px;
            padding: 0;
            cursor: pointer;
            &:nth-child(1){
              color:#1980FF;
            }
          }
      }
      .pagination{
        margin: 20px 0 0 0;
        display: flex;
        justify-content: flex-end;
      }
  }
}
</style>